<template>
	<base-popup
		class="h-[813px]"
		:title="followStore.followShow?.nickName || followStore.followShow?.userName"
		:isGoBack="false"
		v-if="followStore.followShow?.show"
		:modelValue="!!followStore.followShow?.show"
		@close="handleClose">
		<div class="flex flex-col w-full py-[20px] h-[757px]">
			<n-tabs
				:default-value="followStore.followShow?.type"
				size="large"
				v-if="showTab"
				justify-content="space-evenly">
				<n-tab-pane v-if="isMe" name="request" :tab="$t('follow.request')">
					<follow-request />
				</n-tab-pane>
				<n-tab-pane name="following" :tab="$t('follow.following')">
					<follow-following />
				</n-tab-pane>
				<n-tab-pane name="follow" :tab="$t('follow.follower')">
					<follow-follower />
				</n-tab-pane>
			</n-tabs>
		</div>
	</base-popup>
</template>
<script lang="ts" setup>
import { computed, watch, ref, nextTick } from 'vue'
import { useProfileStore, useFollowStore } from '@/store'
import { FollowShowType } from '@/types'
import { BasePopup } from '@/components/base'
import { NTabs, NTabPane } from 'naive-ui'
import followFollower from './components/follow-follower.vue'
import followRequest from './components/follow-request.vue'
import followFollowing from './components/follow-following.vue'

defineOptions({ name: 'ViewsProfileFollow' })

const profileStore = useProfileStore()
const followStore = useFollowStore()
const showTab = ref(true)
const isMe = computed(() => {
	return profileStore.userInfo?.userId === followStore.followShow?.userId
})

watch(
	() => followStore.followShow?.userId,
	(val, oldVal) => {
		if (oldVal && oldVal !== val) {
			showTab.value = false
			nextTick(() => {
				showTab.value = true
			})
		}
	}
)

const handleClose = () =>
	followStore.showFollow({
		show: false,
		type: FollowShowType.none,
		userId: 0,
		userName: '',
		nickName: ''
	})
</script>
